<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :inline="false"
      size="normal"
      :model="formdata">
    <el-row :gutter="10">
      <el-col :span="6" :offset="0">
        <el-form-item label="手机号">
        <el-input v-model="formdata.name"></el-input>
      </el-form-item>
    </el-col>
    </el-row>
      <!-- 保存和取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="savemegdata">注册</el-button>
        <el-button @click="canclebut">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      dialogImageUrl: "",
      dialogVisible: false,
      row: {},
      spuid: 0,
      formdata: {
        name:"",
        grade:"",
        content:"",
        subject:"",
        sex:"",
        school:"",
        arce:"",
        profession:"",
        nowmy:"",
        profile:"",
        tel:"",

        description: "",
        spuImageList: [], //图片信息
        spuName: "",
        spuSaleAttrList: [],
        tmId: 0,
      },
      brand: [],
      photolist: [],
      statsList: [],
      dynamicTags:[],
      attrId:"",
      basedata:{}
    };
  },
  methods: {

    //获取属性的数据:
    async getbackbasedata() {
      //父组件的点击修改之后才会触发的函数回调: 这里发起请求直接赋值会带有字段的
      //id编号使得 在修改与增加的时候会展示出不同
      let result = await this.$API.teacherManagement.getbackbasedata();
     
      if (result.code === 200) {
        this.basedata = result.data;
        console.log(this.basedata);
      }
    },
    
    //照片墙函数回调:
    //删除图片的回调
    handleRemove(file, fileList) {
      this.photolist = fileList;//收集到照片墙上的剩下图片信息
      console.log('handleRemove',this.photolist);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(file);
      console.log('dialogImageUrl',this.dialogImageUrl);
    },
    handlesuccess(response, file, fileList){
      this.photolist = fileList;//收集到照片墙上的所有图片信息
      
      console.log("handlesuccess",fileList);
    },
    //取消按钮
    canclebut() {
      // this.$emit("spusendscene", 1);
      // this.cleardata()
    },
   
    //获取图片列表信息
    async getreqSpuImageListdata() {
      let result = await this.$API.spu.reqSpuImageList(this.spuid);
      if (result.code === 200) {
        let arrlist = result.data;
        arrlist.forEach((element) => {
          element.name = element.imgName;
          element.url = element.imgUrl;
        });
        this.photolist = arrlist;
      }
    },
    
    
    //父组件的点击修改之后才会触发的函数回调:
    initSpuData(row) {
      // this.spuid = row.id;
      // this.getreqSpudata();
      // this.getreqTradeMarkListdata();
      // this.getreqSpuImageListdata();
      // this.getreqBaseSaleAttrListdata();
    },
    //删除一行属性
    deletespuSaleAttrList(index){
      this.formdata.spuSaleAttrList.splice(index,1)
    },
    //保存按钮发送整理参数
    async savemegdata(){
      //整理参数 照片墙 
      // this.formdata.spuImageList= this.photolist.map((item)=>{
      //   return{//现在是imgName和imgUrl而不是imageName和imageUrl
      //     imgName:item.name,
      //     imgUrl:(item.response && item.response.data) || item.url,
      //   }
      // })
      // let result = await this.$API.spu.reqsavespu(this.formdata);
      // if(result.code === 200){
      //   this.$message({
      //     type:"success",
      //     message:"保存成功"
      //   })
      // }
      // this.$emit("spusendscene", 0);
      // this.cleardata();
    },
    //清除数据
    cleardata(){
      Object.assign(this._data,this.$options.data());
    }
  },
  computed:{
    unSelectSaleAttr(){
      return this.statsList.filter(item=>{
        return this.formdata.spuSaleAttrList.every(it=>{
          return item.name != it.saleAttrName;
          //不相同返回true 被保留 相同 返回false 被过滤
        })
      })
    }
  },
  mounted(){
    this.getbackbasedata()
  }
};
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
